<template>
  <div class="container flex vcenter">
    <div class="left flex pcenter">
      <i class="iconfont icon-touxiang"></i>
    </div>
    <div class="mid">
      <div><span>登录</span> | <span>注册</span></div>
      <div class="phone">
        <i class="iconfont icon-shouji"></i>
        <i class="info">暂无绑定手机号</i>
      </div>
    </div>
    <i class="iconfont icon-jiantouyou right"></i>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.container {
  height: 15vh;
  background: var(--color-green);
  color: white;
}
.left {
  margin: 0 12px;
  i {
    font-size: 50px;
  }
}

.mid {
  font-size: 15px;
  font-weight: 600;
  .phone {
    margin: 10px 0;
    .info {
      margin-left: 10px;
    }
  }
}
.right {
  position: absolute;
  right: 10px;
}
</style>